

var gl;
var points;


window.onload = function init()
{
    var canvas = document.getElementById( "gl-canvas" );
    
    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    
    var vertices=[]
    var vertexColors = [];
    /*
    ColorCircle(0, 0, 1, 0, 0, 0, vertices, vertexColors);
    PokeBall(0, 0, 0.99, vertices, vertexColors);
    ColorCircle(0, 0, 0.3, 0, 0, 0, vertices, vertexColors);
    ColorCircle(0, 0, 0.20, 1, 1, 1, vertices, vertexColors);
    ColorCircle(0, 0, 0.15, 0, 0, 0, vertices, vertexColors);
    ColorCircle(0, 0, 0.14, 1, 1, 1, vertices, vertexColors);
    */
    //Star(0, 0, 0.5, 1, 1, 0, vertices, vertexColors);
    /*
    a(-0.05, 0, 0.1, 0.25, 0.15, 0.4, 199/255, 97/255, 20/255, vertices, vertexColors);
    a(0.05, 0, 0.25, 0.4, 0.15, 0.45, 199/255, 97/255, 20/255, vertices, vertexColors);
    a(0.25, 0, 0.3, 0.25, 0.2, 0.38, 199/255, 97/255, 20/255, vertices, vertexColors);
*/
    mountains(0.1, 0.4, 0.15, 0.4,vertices, vertexColors);//调参可以修改这个山的样子
    ColorCircle(-0.8, 0.93, 0.05, 1, 0, 0, vertices, vertexColors);
    waves(0.3,5,0.1,vertices,vertexColors);
    birds(-0.6,0.8,0.05,1,0.1,vertices,vertexColors);
    birds(-0.6,0.8,0.03,3,0.1,vertices,vertexColors);
    //a(-0.2,0,-0.3,0.05,0.2,0.1,1,0,0,vertices,vertexColors);
    //a(-0.05, 0, 0.1, 0.25, 0.15, 0.4, 0/255, 0/255, 0/255, vertices, vertexColors);
    //mountains(0.35, 0.45, 0.15, 0.4,vertices, vertexColors);

    /*
    vertices.push(vec2(0,0,1));
    vertices.push(vec2(3,0,2));
    vertices.push(vec2(0,4,3));
    vertexColors.push(1,0,0,1);
    vertexColors.push(1,1,0,1);
    vertexColors.push(0,0,0,1);
*/
    //vertices.push(0.0,0.0,1.0,1.5,1.0,0.0)
    //vertexColors.push(1,0,0,1);
    //vertexColors.push(1,1,0,1);
    //vertexColors.push(0,0,0,1);


    //  Configure WebGL

    gl.viewport( 0, 0, canvas.width, canvas.height );
    gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
    
    //  Load shaders and initialize attribute buffers
    
    var program = initShaders( gl, "vertex-shader", "fragment-shader" );
    gl.useProgram(program);

    // color array atrribute buffer

    var cBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW);

    var vColor = gl.getAttribLocation(program, "vColor");
    gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vColor);
    
    // Load the data into the GPU    
    var bufferId = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, bufferId );
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW);      
    
    // Associate out shader variables with our data buffer    
    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    render();
};



function render() {
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0,  18 );// gl.drawArrays(mode, first, count). modeΪ��ͼ��ʽ��firstΪ��ʼ�㣬countΪ���������
    gl.drawArrays(gl.TRIANGLES, 18,num*3 );
    gl.drawArrays(gl.LINES, 18+num*3,20*5 );
    gl.drawArrays(gl.LINES, 18+num*3+20*5,4*4 );
    gl.drawArrays(gl.TRIANGLES, 18+num*3+20*5+4*4,6);
    //gl.drawArrays(gl.LINES,6*3 * num,4 );//����ֱ��
}


function Star(X, Y, R, Red, Green, Blue, vertices, vertexColors) {
    x = X;
    y = Y;
    r = R;
    a_x = x; a_y = y + r;
    b_x = x - r * Math.cos(Math.PI / 2 - 2 * Math.PI / 5); b_y = y + r * Math.sin(Math.PI / 2 - 2 * Math.PI / 5);
    c_x = x - r * Math.sin(Math.PI - 2 * 2 * Math.PI / 5); c_y = y - r * Math.cos(Math.PI - 2 * 2 * Math.PI / 5);
    d_x = x + (x - c_x); d_y = c_y;
    e_x = x + (x - b_x); e_y = b_y;

    kp1_x = x - Math.tan(Math.PI / 10) * (r - r * Math.sin(Math.PI / 10));
    kp1_y = y + r * Math.sin(Math.PI / 10);
    kp2_x = x + x - kp1_x;
    kp2_y = kp1_y;

    vertices.push(a_x, a_y, kp1_x, kp1_y, kp2_x, kp2_y);
    vertices.push(b_x, b_y, d_x, d_y, kp2_x, kp2_y);
    vertices.push(kp1_x, kp1_y, c_x, c_y, e_x, e_y);

    for (var i = 0; i < 9; i++)
        vertexColors.push(Red, Green, Blue, 1);

}

function ColorCircle(X, Y, R, Red, Green, Blue, vertices, vertexColors)
{
    x = X;
    y = Y;
    r = R;
    num = 100;//��100�������ν��Ƴ�Բ

    for (var i = 0; i < num; i++) {
        vertices.push(x + r * Math.cos(i / num * 2 * Math.PI),
            y + r * Math.sin(i / num * 2 * Math.PI));
        vertices.push(x, y);
        vertices.push(x + r * Math.cos((i + 1) / num * 2 * Math.PI),
            y + r * Math.sin((i + 1) / num * 2 * Math.PI));
    };

    for (var j = 0; j < 3 * num; j++) {
        vertexColors.push(Red,Green,Blue, 1);
    }
}


function PokeBall(X, Y, R, vertices, vertexColors) {
    x = X;
    y = Y;
    r = R;
    num = 100;//��100�������ν��Ƴ�Բ
    var width = 3;//�м�Ĵ���

    for (var i = 0; i < num; i++) {
        vertices.push(x + r * Math.cos(i / num * 2 * Math.PI),
            y + r * Math.sin(i / num * 2 * Math.PI));
        vertices.push(x, y);
        vertices.push(x + r * Math.cos((i + 1) / num * 2 * Math.PI),
            y + r * Math.sin((i + 1) / num * 2 * Math.PI));
    }
    ;
    for (var i = 0; i < width; i++) {
        vertexColors.push(0, 0, 0, 1);
    }
    ;
    //vertexColors.push(0, 0, 0, 1);
    //vertexColors.push(0, 0, 0, 1);
    //vertexColors.push(0, 0, 0, 1);
    for (var j = width; j < width * num / 2 - width; j++) {
        vertexColors.push(1, 0, 0, 1);
    }
    for (var i = 0; i < 2 * width; i++) {
        vertexColors.push(0, 0, 0, 1);
    }
    ;
    for (var j = 3 * num / 2 + 3; j < 3 * num - 3; j++) {
        vertexColors.push(1, 1, 1, 1);
    }
    ;
    for (var i = 0; i < width; i++) {
        vertexColors.push(0, 0, 0, 1);
    }
    ;
    //以下是填充呈长方形的内容
    //vertices.push(x + r * Math.cos(width / num * 2 * Math.PI),
    //        y + r * Math.sin(width / num * 2 * Math.PI));
    //vertices.push(x, y);

    vertices.push(x + r * Math.cos((width - 1) / num * 2 * Math.PI),
        y + r * Math.sin(((width - 1) / 2) / num * 2 * Math.PI));
    vertices.push(x, y);
    vertices.push(x + r * Math.cos((num / 2 - width + 2) / num * 2 * Math.PI),
        y + r * Math.sin((num / 2 - width + 2) / num * 2 * Math.PI));


    //vertices.push(vertices[2*(3*width-1)-1],vertices[2*(3*width-1)]);
    //vertices.push(vertices[2*(3*(num/2-width-1)-1)-1],vertices[2*(3*(num/2-width-1)-1)]);
    //vertices.push(vertices[2*((num/2-width-1)*3-1)-1)-1],vertices[2*((num/2-width-1)*3-1)-1)]);
    //vertices.push(vertices[2],vertices[3])
    for (var i = 0; i < width; i++) {
        vertexColors.push(0, 0, 0, 1);
    }
    ;

    vertices.push(x + r * Math.cos((width - 1) / num * 2 * Math.PI),
        y + r * Math.sin(((width - 1) / 2) / num * 2 * Math.PI));
    vertices.push(x, y);
    vertices.push(x + r * Math.cos((num / 2 - width + 2) / num * 2 * Math.PI),
        y + r * Math.sin((num / 2 - width + 2) / num * 2 * Math.PI));

    /*
    for (var i = 0; i < width; i++) {
        vertexColors.push(0, 0, 0, 1);
    };
    */
}


function a(x,y,x1,y1,up_length,down_length,R,G,B,vertices,vertexColors)//(x,y)是左下角，（x1，y1）是左上角，up是上底长，down是下底长
{
    vertices.push(x,y,x1,y1,x1+up_length,y1);
    vertices.push(x,y,x1+up_length,y1,x+down_length,y);
    for (var i = 0; i < 6; i++) {
        vertexColors.push(R, G, B, 1);
    }
}

function mountains(x,y,up_length,down_length,vertices,vertexColors)//用梯形画山，一座山有18个点
{
    mountain_r=199/255;
    mountain_g=97/255;
    mountain_b=20/255;
    var x1=x+0.15
    var y1=y+0.25

    //a(-0.05, 0, 0.1, 0.25, 0.15, 0.4, mountain_r,mountain_g,mountain_b, vertices, vertexColors);
    //a(0.05, 0, 0.25, 0.4, 0.15, 0.45, mountain_r,mountain_g,mountain_b, vertices, vertexColors);
    //a(0.25, 0, 0.3, 0.25, 0.2, 0.38, mountain_r,mountain_g,mountain_b, vertices, vertexColors);
    a(x,y,x1,y1,up_length,down_length,mountain_r,mountain_g,mountain_b,vertices,vertexColors);
    a(x+0.1,y,x1+0.15,y1+0.15,up_length,down_length+0.05,mountain_r,mountain_g,mountain_b,vertices,vertexColors);
    a(x+0.3,y,x1+0.2,y1,up_length+0.05,down_length-0.02,mountain_r,mountain_g,mountain_b,vertices,vertexColors);
}
function waves(x,wave_num,wide,vertices,vertexColors) //x是起始点所处的纵坐标，num是几条,wide 是隔得宽度
//20*num个点
{
    wave_r=0/255;
    wave_g=0/255;
    wave_b=255/255;

    //vertices.push(0.0,x,0.15,x,0.2,x,0.35,x,0.4,x,0.55,x,0.6,x,0.75,x,0.8,x,0.95,x);
   // for(var i=0;i<wave_num;i++)
    //{
     //   vertices.push(0.0,x-wide*i,0.15,x-wide*i,0.2,x-wide*i,0.35,x-wide*i,0.4,x-wide*i,0.55,x-wide*i,0.6,x-wide*i,0.75,x-wide*i,0.8,x-wide*i,0.95,x-wide*i);
    //}
    for(var i=0;i<wave_num;i++)
    {
        if(i%2==0)
        {
            var start=-1;
        }
        else
        {
            var start=-0.95;
        }
        for(var j=0;j<10;j++)
        {
            vertices.push(start+0.15*j,x-wide*i,start+0.15*(j+1),x-wide*i);//跳整水面的结构
            start+=0.05;
        }
    }
    for(var i=0;i<20*wave_num;i++)
    {
        vertexColors.push(wave_r,wave_g,wave_b,1);
    }
}

function birds(x,y,l,nums,space,vertices,vertexColors) //是用的等腰三角形的两个腰，l是该等腰三角形的高,一只鸟四个点,space是间隔
{
    //vertices.push(x,y,x+l,y-l*1.732/3,x,y,x+l,y+l*1.732/3);
    for(var i=0;i<4*nums;i++)
    {
        vertices.push(x,y,x+l,y-l*1.732/3,x,y,x+l,y+l*1.732/3);
        x+=space;
        vertexColors.push(0,0,0,1);
    }
}